{% extends 'base.html' %}
{% load staticfiles %}


{% block css %}
    <link href="{% static 'editor/css/froala_style.css' %}" rel="stylesheet">
    <link href="{% static 'editor/css/froala_editor.pkgd.min.css' %}" rel="stylesheet">
{% endblock %}
{% block content %}


    <div class="container">  <!-- 开加一个container的目的是为了让整体布局居中 -->
        <!-- 开始 -->
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div id="froala-editor">

                    Here comes the HTML edited with the Froala rich text editor.

                    <img src="{% static 'img/logo.png' %}">
                </div>
            </div>

        </div>

    </div>







{% endblock %}

{% block script %}

    {#文本编辑框插件开始#}
    <script src="{% static 'editor/js/froala_editor.pkgd.min.js' %}"></script>
    <script src="{% static 'editor/js/languages/zh_cn.js' %}"></script>
    <script src="{% static 'editor/js/plugins/font_family.min.js' %}"></script>

    <script>

        {#        插入#}
        FroalaEditor.DefineIcon('insertHTML', {NAME: 'plus', SVG_KEY: 'add'});
        FroalaEditor.RegisterCommand('insertHTML', {
            title: '插入段落',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
                this.html.insert('222这个是你要插入的段落,支持代码<img src="{% static 'img/logo.png' %}">');
                this.undo.saveStep();
            }
        });
        FroalaEditor.DefineIcon('insertHTML', {NAME: 'plus', SVG_KEY: 'add'});
        FroalaEditor.RegisterCommand('插入自定义信息代码', {
            title: '插入代码',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
                this.html.insert('这个是你111要插入的段落,支持代码<img src="{% static 'img/logo.png' %}">');
                this.undo.saveStep();
            }
        });

        FroalaEditor.DefineIcon('clear', {NAME: 'remove', SVG_KEY: 'remove'});
        FroalaEditor.RegisterCommand('clear', {
            title: 'Clear HTML',
            focus: false,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
                this.html.set('');
                this.events.focus();
            }
        });

        editor = new FroalaEditor('div#froala-editor', {
                heightMin: 200,
                heightMax: 500,
                language: 'zh_cn',

            toolbarButtons: [
                ['bold', 'italic', 'underline', 'backgroundColor', 'emoticons','','paragraphFormat', 'formatOL', 'formatUL'],
                [ 'fontFamily','fontSize','textColor','backgroundColor'],
                ['insertHTML', 'undo', 'redo','clear'],
                ['插入自定义信息代码', 'undo', 'redo', 'html','clear']
            ]
        })
    </script>
    {#文本编辑框插件结束#}

{% endblock %}